import React, { Component } from 'react'
import { NavLink, Route } from 'react-router-dom'
import Classify from './home/Classify'
import Car from './home/Car'
import My from './home/My'
import { connect } from 'react-redux'
import './Home.css'

class Home extends Component {
    state = {
        list: [
            {
                path: "/home/classify",
                title: "分类"
            },
            {
                path: "/home/car",
                title: "购物车"
            },
            {
                path: "/home/my",
                title: "我的"
            }
        ]
    }
    render() {
        const { list } = this.state
        const { allCount } = this.props
        return (
            <div className='home'>
                <main>
                    <Route path="/home/classify" component={Classify} />
                    <Route path="/home/car" component={Car} />
                    <Route path="/home/my" component={My} />
                </main>
                <footer className='footer'>
                    {
                        list.map((item, index) => {
                            return <div key={index}>
                                <NavLink to={item.path}>
                                    {item.title}
                                </NavLink>
                                {
                                    index === 1 ? <span className='span'>
                                        {allCount}
                                    </span> : <></>
                                }
                            </div>
                        })
                    }
                </footer>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    const { car } = state
    const { allCount } = car
    return {
        allCount
    }
}

Home = connect(mapStateToProps)(Home)

export default Home
